<template>
  <div id="register">

    <div style="margin-left:-1000px; margin-top:50px ">我的余额：{{oldBlance}} 元</div>
    <el-row :gutter="12">
      <el-col :span="6" :offset="2" style="margin-top: 150px;">
        <el-form :model="infoForm" status-icon label-width="100px" class="demo-infoForm">
      
          <el-form-item label="金额" prop="balance">
            <el-input v-model="infoForm.balance"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="infoSubmitForm()">充值</el-button>
            <el-button @click="resetForm('infoForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-col :span="8" :offset="12" style="margin-top: -200px;">
    <el-table :data="tableData" stripe style="width: 100%" >
        <el-table-column prop="date" label="充值时间" width="180"></el-table-column>
        <el-table-column prop="price"  label="充值金额"  width="180"></el-table-column>
        <el-table-column prop="state" label="充值状态"></el-table-column>
    </el-table>
    </el-col>

  </div>
</template>

<script>
export default {
  name: "myinfo",
    data() {
      return {
        oldBlance:'',
          infoForm:{
            userId:localStorage.getItem("loginUser"),
            balance:'',
          },
           tableData:[{
             date:'',
             price:'',
             state:''
           }]
      }
  },
    methods:{
      infoSubmitForm(){
          if(this.infoForm.balance==''){
           this.$message("请输入金额")
           return
          }else{
            //发送请求生成充值订单
            this.$http.get("/createwelltorder",{
          params: {
            money:this.infoForm.balance,
            id:localStorage.getItem("loginUser")
          }
        }).then(response => {
          console.log(response);
          //跳转至支付页面
          window.location.href="http://192.168.80.191:9090/pay?orderid="+response.data.data+"11223344&money="+this.infoForm.balance+"&name=用户充值"
        }) 
        }
      },
      findBalance(){
        this.$http.get("/findBalance",{
          params: {
            userId:localStorage.getItem("loginUser")
          }
        })
        .then(response => {
          console.log(response);
            this.oldBlance=response.data.data.balance
        })

      },
      findRecord(){
         this.$http.get("/findRecord",{
          params: {
            userId:localStorage.getItem("loginUser")
          }
        })
        .then(response => {
          console.log(response);
            this.tableData=response.data.data
        })
      }

    },

    mounted(){
      this.findBalance();
      this.findRecord();
    }
  
}
</script>